<template>
  <div class="FcSelect">

    <el-select
        v-bind="attrs"
        v-model="showValue"
        filterable
        reserve-keyword
        remote-show-suffix
        :value-key="valueKey"
    >
      <el-option
          v-for="item in options"
          :key="item[valueKey]"
          :label="item[labelKey]"
          :value="item"
      />
    </el-select>
  </div>
</template>
<script setup name="FcSelect">
import {isNotEmptyArray} from "@/views/flow/tool.js";
const attrs = useAttrs();
const emits = defineEmits(['update:modelValue']);
const props = defineProps({
  modelValue: {
    type: [Array],
    default: () => null
  },
  options: {
    type: Array,
    default: () => []
  },
  valueKey: {
    type: String,
    default: 'value'
  },
  labelKey: {
    type: String,
    default: 'label'
  }
});
const showValue = computed({
  get() {
    if (attrs.multiple) {
      return isNotEmptyArray(props.modelValue) ? props.modelValue : undefined;
    } else {
      return isNotEmptyArray(props.modelValue) ? props.modelValue[0] : undefined;
    }
  },
  set(val) {
    if (attrs.multiple) {
      emits('update:modelValue', val);
    } else {
      emits('update:modelValue', [val]);
    }
  }
});
</script>
<style scoped lang="scss">
.FcSelect {
}
</style>
